welcome

Thank you for using a design from Almost Sweet. As long as you keep the design credit intact (with the link to http://almostsweet.neocities.org), you may use as you like. If you need any assistance, contact me at Almost Sweet by Cbox. Enjoy!

This design was originally for a contest, but it wasn't chosen for any place, so I decided to provide it as a premade since I dislike seeing things unused. This is actually the first premade I created with the sole purpose of being a layout for others to use without having used it myself so voila! Brand new, basically. I wasn't sure what to do with the links since the more I worked on fitting everything to the header image, the more I realized this could have just been a template and header image separate from each other. They go quite nicely with each other though, don't you think? If you do decide to change the header image, however, it wouldn't be that much of a problem, especially if your own header image was space/star-themed. :D

One point I'd like to note though is that the way the divs expand in this design are even until there is a large amount of content in either the sidebar or the main content box, which will trigger an auto-expansion according to however long the content expands. If this bothers you, I suggest that you either include overflow:auto for both divs so that they scroll once you hit that large content point or refrain from putting a whole ton of content in either div altogether. I haven't yet figured out how to expand the parent div yet, so bear with me. If you have any troubles with this, contact me on my cbox and I shall do my best!

how to use this layout design

Save the following as style.css
html,body{ margin: 0px; padding: 0px; height:100%; background-image:url('http://i.imgur.com/JIys63C.jpg'); background-color:#2d3a80; font-family: 'Titillium Web', sans-serif; font-size: 13px; color:#fff; text-align:justify; letter-spacing:1px; } #box1{ position:relative; width:735px; min-height:100%; margin:72px auto; padding:8px; } #header{ height:350px; width:735px; background-image:url('http://i.imgur.com/60rpjen.png'); border:1px solid #230023; } #linkity{ position:absolute; top:-23px; left:7px; width:735px; line-height:30px; text-align:center; } #linkity a{ width:120px; display:inline-block; margin-right:-3px; background-color:#230023; color:#fff; -moz-border-radius:10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; border-radius:10px 10px 0px 0px; text-transform:uppercase; letter-spacing:2px; border:1px solid #230023; } #linkity a:hover{ background-color:rgba(35,0,35,0.4); border-bottom:1px solid #fff; -moz-transition:.4s; -webkit-transition:.4s; transition:.4s;} #box2{ position:absolute; top:359px; width:528px; min-height:100%; border:1px solid #230023; margin-right:4px; padding:8px; background-color:rgba(35,0,35,0.4); margin-bottom:4px; } #box3{ position:absolute; top:359px; left:553px; width:174px; min-height:100%; border:1px solid #230023; padding:8px; background-color:rgba(35,0,35,0.4); margin-bottom:4px; text-align:left; } h1{ text-align:center; font-size:14px; line-height:30px; font-family:times; font-style:bold; display:block; border-bottom:1px solid #a481b0; letter-spacing:2px; margin: -2px 0px 0px -4px; background:url('http://i.imgur.com/JIys63C.jpg'); } a{ color:#fff; background:#000; text-decoration:none; font-style:italic; } a:hover{ background:rgb(35,0,35); }

Save the following as your index page (.html or .php), and do the same for all other pages.
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'> <head> <body> <div id="box1"> <div id="linkity"><a href="http://almostsweet.neocities.org">link</a> <a href="http://almostsweet.neocities.org">me</a> <a href="http://almostsweet.neocities.org">to</a> <a href="http://almostsweet.neocities.org">the</a> <a href="http://almostsweet.neocities.org">stars</a></div> <div id="header"></div><div id="box2"> <h1>welcome</h1> <p><i>Thank you for using a design from Almost Sweet. As long as you keep the design credit intact (with the link to http://almostsweet.neocities.org), you may use as you like. If you need any assistance, contact me at Almost Sweet by Cbox. Enjoy!</i></p> <p>Recent controversy aside, a sprucest turtle is a continent of the mind. Extending this logic, the managers could be said to resemble thriftless captains. However, those cylinders are nothing more than sphynxes. An exclamation is a jellyfish's guarantee.</p> <p>In ancient times the first seeing page is, in its own way, a geography. What we don't know for sure is whether or not the conjunct limit reveals itself as an unsoiled study to those who look. Authors often misinterpret the sing as an untanned opera, when in actuality it feels more like a connate hourglass. The yestern gearshift comes from an insides swallow.</p> </p> <p>A toilful router without chives is truly a astronomy of irate plywoods. An anatomy is the push of a liquor. It's an undeniable fact, really; the agleam grain reveals itself as a runic comic to those who look. A ramie can hardly be considered a cuprous hamster without also being a harmonica.</p> <h1>00.00.00</h1> <p>The comic of a clerk becomes a chastised bugle. A bicycle is a fur's Monday. Governors are sighted balineses. We know that a month can hardly be considered a porcine faucet without also being a rhinoceros.</p> <p>A toilful router without chives is truly a astronomy of irate plywoods. An anatomy is the push of a liquor. It's an undeniable fact, really; the agleam grain reveals itself as a runic comic to those who look. A ramie can hardly be considered a cuprous hamster without also being a harmonica.</p> </div> <div id="box3"> <h1>about</h1> <p><img src="http://i68.photobucket.com/albums/i38/mostdominatediva/Sailor%20Moon%20R%20Icons/s8762661287_zpsa44ceed2.png" title="icon by elegantamber at livejournal.com" style="float:left;height:80px;width:80px;padding-right:8px;padding-bottom:2px;">This icon is from a user called elegantamber on livejournal. This is not to discredit the idea that the adjustments could be said to resemble senile knives. Far from the truth, farrow apparatuses show us how sidecars can be poisons. It's an undeniable fact, really; the literature would have us believe that a prostrate blizzard is not but a cat.</p> <h1>link exchange</h1> <p>[<a href="/">★</a>] [<a href="/">♥</a>] [<a href="/">★</a>] [<a href="/">♥</a>] [<a href="/">★</a>] [<a href="/">♥</a>] [<a href="/">★</a>] [<a href="/">♥</a>]</p> <h1>chatterbox</h1> <div style="width:171px;height:281px;background-color:rgba(255,255,255,0.3);line-height:281px;text-align:center;">171px × 281px</div> <h1>disclaimers</h1> <p>sitename © your name<br>design by <a href="http://almostsweet.neocities.org">almost sweet ☂</a> — <a href="http://almostsweet.neocities.org/about.html">resources</a></p></div></div></body>

00.00.00

The comic of a clerk becomes a chastised bugle. A bicycle is a fur's Monday. Governors are sighted balineses. We know that a month can hardly be considered a porcine faucet without also being a rhinoceros.

about

icon by elegantamber at livejournal.com The organization of this text is a bit odd, so removing the icon is always possible (or you can replace it with your own [100px each side of course]!). This icon is from a user called elegantamber on livejournal.